@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="card_number" placeholder="油卡卡号" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">请选择状态</option>
                            @foreach($status as $k => $v)
                                <option value="{{$k}}">{{$v}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn" id="searchBtn">搜 索</button>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
@endsection

@section('script')
    @can('card.allowance')
        <script>
            layui.use(['layer', 'table', 'form'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 500
                    , url: "{{ route('admin.allowance.data') }}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'id', title: 'ID', width: 80}
                        , {field: 'card_number', title: '卡号', width: 200}
                        , {field: 'shipping_no', title: '运单号', width: 150}
                        , {field: 'allowance_fee', title: '补贴金额(元)', width: 150}
                        , {
                            field: 'status', title: '退还状态', width: 100, templet: function (d) {
                                if (d.status == 10) {
                                    return '使用中';
                                } else if (d.status == 20) {
                                    return '已退还';
                                } else {
                                    return '已丢失';
                                }
                            }
                        }
                        , {field: 'created_at', title: '创建时间'}
                        , {field: 'updated_at', title: '更新时间'}
//                        , {fixed: 'right', width: 260, align: 'center', toolbar: '#options'}
                    ]]
                });

                // 搜索
                form.on('submit(searchBtn)', function (data) {
                    //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                    var fields = data.field;
                    dataTable.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: fields // 搜索字段
                    });

                    return false; //阻止表单跳转
                });
            })
        </script>
    @endcan
@endsection